<template>
  <div class="app-container">
    <el-card style="border-radius: 10px">
      <el-form ref="form" :model="form" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户编码" prop="clientCode">
              <el-input v-model="form.clientCode" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户名称" prop="clientName">
              <el-input v-model="form.clientName" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="客户简称" prop="clientNick">
              <el-input v-model="form.clientNick" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户英文名称" prop="clientEn">
              <el-input v-model="form.clientEn" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户类型" prop="clientType">
              <el-select v-model="form.clientType" disabled>
                <el-option
                  v-for="dict in dict.type.mes_client_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="客户简介" prop="clientDes">
              <el-input v-model="form.clientDes" type="textarea" readonly/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="客户地址" prop="address">
              <el-input v-model="form.address" type="textarea" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户官网地址" prop="website">
              <el-input v-model="form.website" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户邮箱地址" prop="email">
              <el-input v-model="form.email" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户电话" prop="tel">
              <el-input v-model="form.tel" readonly/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户LOGO" prop="clientLogo">
              <el-input v-model="form.clientLogo" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="联系人1" prop="contact1">
              <el-input v-model="form.contact1" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人1-电话" prop="contact1Tel">
              <el-input v-model="form.contact1Tel" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人1-邮箱" prop="contact1Email">
              <el-input v-model="form.contact1Email" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="联系人2" prop="contact2">
              <el-input v-model="form.contact2" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人2-电话" prop="contact2Tel">
              <el-input v-model="form.contact2Tel" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人2-邮箱" prop="contact2Email">
              <el-input v-model="form.contact2Email" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开户行" prop="openBank">
              <el-input v-model="form.openBank" readonly/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开户账号" prop="openAccount">
              <el-input v-model="form.openAccount" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="社会信用代码" prop="creditCode">
              <el-input v-model="form.creditCode" readonly />
            </el-form-item>
          </el-col >
          <el-col :span="12">
            <el-form-item label="是否有效" prop="enableFlag">
              <el-radio-group v-model="form.enableFlag" disabled>
                <el-radio
                  v-for="dict in dict.type.sys_yes_no"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" readonly />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card style="border-radius: 10px">
      <el-row>
        <el-tabs v-model="tabValue" type="card" @tab-click="handleTabClick">
          <el-tab-pane v-for="item in dicList" :key="item.value" :label="item.label" :name="item.value"></el-tab-pane>
        </el-tabs>
        <div class="mod-config" style="width: 100%;">
          <!-- 发票 -->
          <div v-show="isInvoice">
            <el-table :data="salesInvoiceList" border>
              <el-table-column label="发票号码" align="center" prop="invoiceNumber" />
              <el-table-column label="发票代码" align="center" prop="invoiceCode" />
              <el-table-column label="客户名称" align="center" prop="clientName" />
              <el-table-column label="发票金额" align="center" prop="invoiceValue" />
              <el-table-column label="发票类型" align="center" prop="invoiceType" />
              <el-table-column label="开票人" align="center" prop="invoicePerson" />
              <el-table-column label="开票日期" align="center" prop="invoiceDate" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.invoiceDate, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
            </el-table>

            <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getInvoiceList"
            />
          </div>
          <!-- 其他 -->

        </div>
      </el-row>
    </el-card>

    <div slot="footer" style="display: flex; justify-content: center; width: 100%;">
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { listSalesInvoice } from "@/api/mes/xs/salesInvoice";
export default {
  name: "ClientView",
  dicts: ['mes_client_type','sys_yes_no'],
  data() {
    return {
      form: {},
      rules: {
        clientName: [
          { required: true, message: "请输入客户名称", trigger: "blur" }
        ],
        clientCode: [
          { required: true, message: "请输入客户编码", trigger: "blur" }
        ],
        clientType: [
          { required: true, message: "请选择客户类型", trigger: "change" }
        ],
        clientLevel: [
          { required: true, message: "请选择客户等级", trigger: "change" }
        ]
      },
      // 标签属性
      tabValue: '0',
      // tab标签组
      dicList: [
        { label: "发票", value: '0' },
      ],
      // 发票开关
      isInvoice: false,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        clientId: null,
      },
      // 销售发票表格数据
      salesInvoiceList: [],
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.reset();
      this.tabValue = '0';
      this.isInvoice = true;
      this.getInvoiceList();
    },
    // 表单重置
    reset() {
      this.form = {
        clientId: this.$route.params.clientId,
        clientCode: this.$route.params.clientCode,
        clientName: this.$route.params.clientName,
        clientNick: this.$route.params.clientNick,
        clientEn: this.$route.params.clientEn,
        clientDes: this.$route.params.clientDes,
        clientLogo: this.$route.params.clientLogo,
        clientType: this.$route.params.clientType,
        address: this.$route.params.address,
        website: this.$route.params.website,
        email: this.$route.params.email,
        tel: this.$route.params.tel,
        contact1: this.$route.params.contact1,
        contact1Tel: this.$route.params.contact1Tel,
        contact1Email: this.$route.params.contact1Email,
        contact2: this.$route.params.contact2,
        contact2Tel: this.$route.params.contact2Tel,
        contact2Email: this.$route.params.contact2Email,
        creditCode: this.$route.params.creditCode,
        enableFlag: this.$route.params.enableFlag,
        openBank: this.$route.params.openBank,
        openAccount: this.$route.params.openAccount,
        remark: this.$route.params.remark,
        attr1: this.$route.params.attr1,
        attr2: this.$route.params.attr2,
        attr3: this.$route.params.attr3,
        attr4: this.$route.params.attr4,
        createBy: this.$route.params.createBy,
        createTime: this.$route.params.createTime,
        updateBy: this.$route.params.updateBy,
        updateTime: this.$route.params.updateTime
      };
      this.resetForm("form");
    },
    // 取消按钮
    cancel() {
      const obj = { path: "/mes/md/client" };
      this.$tab.closeOpenPage(obj);
    },
    // tab点击
    handleTabClick(tab, event) {
      if (tab.name === '0') {
        this.tabValue = tab.name;
        this.isInvoice = true;
        this.getInvoiceList();
      }else {
        // 其他标签
      }
    },
    /** 查询销售发票列表 */
    getInvoiceList() {
      this.queryParams.clientId = this.form.clientId;
      listSalesInvoice(this.queryParams).then(response => {
        this.salesInvoiceList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
  }
};
</script>
